<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<div id="app">
    username: <input type="text" v-model="user.username"> <br>
    password: <input type="password" v-model="user.password"> <br>
    gender: <input type="radio" name="gender" value="man" v-model="user.gender"> 男
    <input type="radio" name="gender" value="women" v-model="user.gender"> 女<br>

    <input type="button" value="提交" @click="send">
    <input type="button" value="提交2" @click="send2">
    <input type="button" value="提交3" @click="send3">
    <input type="button" value="提交4" @click="send4">

    <br>
    {{msg}}
</div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{
            user: {
                username: "",
                password: "",
                gender: "women"
            },
            msg:""
        },
        methods:{
            send(){
                axios({
                    //请求路径
                    url:"/user/axios1",
                    //请求方式
                    method:"POST",
                    //发送到后台的数据格式是key=value&key2=value2...
                    params:this.user
                }).then(resp=>{
                    let r = resp.data;
                    this.msg = r.data;
                })
            },
            send2(){
                axios({
                    //请求路径
                    url:"/user/axios2",
                    //请求方式
                    method:"POST",
                    //发送到后台的数据格式是json格式
                    data:this.user
                }).then(resp=>{
                    let r = resp.data;
                    this.msg = r.data;
                })
            },
            send3(){
                axios({
                    //请求路径
                    url:"/user/axios3",
                    //请求方式
                    method:"POST",
                    //发送到后台的数据格式是json格式
                    data:this.user,
                    //发送到后台的数据格式是key=value&key2=value2...
                    params: this.user,
                    headers:{
                        h1:"v1",
                        h2:"v2"
                    }
                }).then(resp=>{
                    let r = resp.data;
                    this.msg = r.data;
                })
            },

            async send4(){
                let resp = await this.sendAsyn();

                this.msg = resp.data.data;
            },

            sendAsyn(){
                return axios({
                    //请求路径
                    url:"/user/axios3",
                    //请求方式
                    method:"POST",
                    //发送到后台的数据格式是json格式
                    data:this.user,
                    //发送到后台的数据格式是key=value&key2=value2...
                    params: this.user,
                    headers:{
                        h1:"v1",
                        h2:"v2"
                    }
                })
            }
        }
    });
</script>

</html>